Estoy tratando de conectar mi aplicación con una base de datos firebase, pero recibo 4 mensajes de error en app.module.ts:
'"@angular/fire"' has no exported member 'AngularFireModule'.ts(2305), '"@angular/fire/storage"' has no exported member 'AngularFireStorageModule'.ts(2305) '"@angular/fire/database"' has no exported member 'AngularFireDatabaseModule'.ts(2305) '"@angular/fire/auth"' has no exported member 'AngularFireAuthModule'.ts(2305)aquí está mi archivo package.json:
{ "name": "gescable", "version": "0.0.1", "author": "Ionic Framework", "homepage": "https://ionicframework.com/", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular-devkit/architect": "^0.1202.5", "@angular-devkit/architect-cli": "^0.1202.5", "@angular/common": "~12.1.1", "@angular/core": "~12.1.1", "@angular/fire": "^7.0.4", "@angular/forms": "~12.1.1", "@angular/platform-browser": "~12.1.1", "@angular/platform-browser-dynamic": "~12.1.1", "@angular/router": "~12.1.1", "@ionic/angular": "^5.5.2", "ajv": "^8.6.2", "angularfire2": "^5.4.2", "firebase": "^7.24.0", "rxfire": "^6.0.0", "rxjs": "~6.6.0", "tslib": "^2.2.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "~12.1.1", "@angular-eslint/builder": "~12.0.0", "@angular-eslint/eslint-plugin": "~12.0.0", "@angular-eslint/eslint-plugin-template": "~12.0.0", "@angular-eslint/template-parser": "~12.0.0", "@angular/cli": "~12.1.1", "@angular/compiler": "~12.1.1", "@angular/compiler-cli": "~12.1.1", "@angular/language-service": "~12.0.1", "@ionic/angular-toolkit": "^4.0.0", "@types/jasmine": "~3.6.0", "@types/jasminewd2": "~2.0.3", "@types/node": "^12.11.1", "@typescript-eslint/eslint-plugin": "4.16.1", "@typescript-eslint/parser": "4.16.1", "eslint": "^7.6.0", "eslint-plugin-import": "2.22.1", "eslint-plugin-jsdoc": "30.7.6", "eslint-plugin-prefer-arrow": "1.2.2", "jasmine-core": "~3.8.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~6.3.2", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "protractor": "~7.0.0", "ts-node": "~8.3.0", "typescript": "~4.2.4", "@angular-devkit/architect": "^0.1200.0", "firebase-tools": "^9.0.0", "fuzzy": "^0.1.3", "inquirer": "^6.2.2", "inquirer-autocomplete-prompt": "^1.0.1", "open": "^7.0.3", "jsonc-parser": "^3.0.0" }, "description": "An Ionic project" }Y aquí está mi app.module.ts:
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouteReuseStrategy } from '@angular/router'; import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { ClientPageModule } from './client/client.module'; import { environment } from '../environments/environment'; import { AngularFireModule } from '@angular/fire'; import { AngularFireAuthModule } from '@angular/fire/auth'; import { AngularFireStorageModule } from '@angular/fire/storage'; import { AngularFireDatabaseModule } from '@angular/fire/database'; @NgModule({ declarations: [AppComponent], entryComponents: [], imports: [ BrowserModule, IonicModule.forRoot(), AppRoutingModule, ClientPageModule, AngularFireModule.initializeApp(environment.firebaseConfig), AngularFireAuthModule, AngularFireStorageModule, AngularFireDatabaseModule ], providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }], bootstrap: [AppComponent], }) export class AppModule {}Aquí está mi archivo tsonfig.ts
"compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "moduleResolution": "node", "importHelpers": true, "target": "es2015", "module": "es2020", "lib": ["es2018", "dom"] }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, "strictInjectionParameters": true, "strictInputAccessModifiers": true, "strictTemplates": true, "skipLibCheck": true } }Necesitas agregar "compat" como este
import { AngularFireModule } from "@angular/fire/compat"; import { AngularFireAuthModule } from "@angular/fire/compat/auth"; import { AngularFireStorageModule } from '@angular/fire/compat/storage'; import { AngularFirestoreModule } from '@angular/fire/compat/firestore'; import { AngularFireDatabaseModule } from '@angular/fire/compat/database';@angular/fire ^7.0.4 no coincide con esta dependencia: firebase ^7.24.0 .
O dependes de firebase 9.0.2 cambias a @angular/fire ^6.1.5 .
Solo vea la documentación que he vinculado, lo establece claramente.
"@angular/fire": "~7.0.4", "firebase": "~9.0.2", Además, @ionic había sido reemplazado por @capacitor y devkit entra en devDependencies .
Primero, cambie las importaciones agregando compacto
import { AngularFireAuthModule } from "@angular/fire/compat/auth"; import { AngularFireStorageModule } from '@angular/fire/compat/storage'; import { AngularFirestoreModule } from '@angular/fire/compat/firestore'; import { AngularFireDatabaseModule } from '@angular/fire/compat/database'; Si eso no resuelve el problema, escriba ctrl+Z y verifique la compatibilidad de Angular Firebase y AngularFire
13 9 ^7.2
12 9 ^7.0
12 7,8 ^6.1.5
Muchas gracias a @AchrafBj y @martin-Zeitler. Todo funciona correctamente:
import { AngularFireAuthModule } from "@angular/fire/compat/auth"; import { AngularFireStorageModule } from '@angular/fire/compat/storage'; import { AngularFirestoreModule } from '@angular/fire/compat/firestore'; import { AngularFireDatabaseModule } from '@angular/fire/compat/database';```` here is the link https://firebase.google.com/docs/web/modular-upgrade Enjoy!!!!